
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>心</title>

<style>
html,body{
  width: 100%;
  height: 100%;
}

body{
  margin: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  background-image: radial-gradient(pink, #FF8888);
}

.heart{
  width: 60px;
  height: 60px;
  background-color: tomato;
  position: relative;
  animation:beat .6s infinite ease-in;
}
.heart:before, .heart:after{
  content:"";
  position: absolute;
  width: 60px; height: 60px;
  background-color: tomato;
  border-radius: 50%;
}
.heart:before{
  left: 30px;
}

.heart:after{
  top: -30px;
}

@keyframes beat{
  0%{
    transform:scale(1) rotate(-45deg);
  }
  
  40%{
    transform:scale(1) rotate(-45deg);
  }
  
  55%{
    transform:scale(1.3) rotate(-30deg);
  }
  
  70%{
    transform:scale(1) rotate(-45deg);
  }
  
  85%{
    transform:scale(1.3) rotate(-60deg);
  }
  
  100%{
    transform:scale(1) rotate(-45deg);
  }
}
</style>

</head>
<body>

<div class="heart"></div>

</body>
</html>
